<template>
	<view class="insurance-page">
		<u-navbar leftIconColor="rgba(255,255,255,0.0)" :autoBack="false" :placeholder="true"
			bgColor="rgba(255,255,255,0.0)">
			<view slot="center" class="nav-title">
				保險
			</view>
		</u-navbar>
		<view class="head">
			<view>
				<view class="head-title">
					養老保險
				</view>
				<view class="head-title">
					資料填寫
				</view>
			</view>
			<image class="head-icon" src="../../static/insurance/insurance-icon.png" mode=""></image>
		</view>
		<view class="content">
			<view class="title">
				投保人
			</view>
			<view class="item">
				<u-input placeholder="請選擇投保人" border="none" readonly v-model="member">
					<template slot="suffix">
						<image class="right-img" @click.stop="option_show = true"
							src="../../static/insurance/insurance-dwon.png" mode=""></image>
					</template>
				</u-input>
			</view>
			<view class="title">
				每月保單金額
			</view>
			<view class="item">
				<u-input placeholder="請選擇保單金額" readonly border="none" v-model="pirce">
					<template slot="suffix">
						<image class="right-img" @click.stop="pirce_show = true"
							src="../../static/insurance/insurance-dwon.png" mode=""></image>
					</template>
				</u-input>
			</view>
			<view class="title">
				領取年齡
			</view>
			<view class="item">
				<u-input placeholder="請選擇領取年齡" readonly border="none" v-model="age">
					<template slot="suffix">
						<image class="right-img" @click.stop="goopen" src="../../static/insurance/insurance-dwon.png"
							mode=""></image>
					</template>
				</u-input>
			</view>
			<view class="title">
				每月領取金額
			</view>
			<view class="item">
				<u-input placeholder="每月領取金額" border="none" readonly v-model="lqpirce"></u-input>
			</view>
			<view class="text">
				{{introduction||''}}
			</view>
		</view>
		<view class="btn">
			<u-button shape="circle" @click="gobuy" size="large"
				color="linear-gradient( 159deg, #7DD5CC 0%, #45C5AA 100%)" type="primary" text="提交保單"></u-button>
		</view>
		<u-picker :show="option_show" keyName="name" :columns="list" @cancel="option_show = false"
			@confirm="modifyInfo"></u-picker>
		<u-picker :show="pirce_show" keyName="name" :columns="pircelist" @cancel="pirce_show = false"
			@confirm="pirceInfo"></u-picker>
		<u-picker :show="age_show" keyName="age" :columns="agelist" @cancel="age_show = false"
			@confirm="ageInfo"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				member: '',
				option_show: false,
				id: '',
				list: [
					[]
				],
				pircelist: [
					[]
				],
				agelist: [
					[]
				],
				pirce_show: false,
				pirce: '',
				age: '',
				age_show: false,
				lqpirce: '',
				introduction:''
			}
		},
		onLoad() {
			this.getlist()
			this.spulist()
		},
		methods: {
			gobuy() {
				if (this.member == '') {
					uni.showToast({
						title: '請選擇投保人！',
						icon: 'none'
					})
					return
				}
				if (this.pirce == '') {
					uni.showToast({
						title: '請選擇保單金額！',
						icon: 'none'
					})
					return
				}
				if (this.age == '') {
					uni.showToast({
						title: '請選擇領取年齡！',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let params = {
					skuId: this.addid,
					addressId: this.id
				}
				this.$Request({
					method: 'POST',
					url: '/app-api/trade/order/add',
					data: params,
					ismsg: false,
				}).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						uni.showToast({
							title: '提交成功！',
							icon: 'none'
						})
						this.member = ''
						this.pirce = ''
						this.age = ''
						this.lqpirce = ''
					}
				})
			},
			goopen() {
				if (this.agelist[0].length < 1) {
					uni.showToast({
						title: '請先選擇保單金額！',
						icon: 'none'
					})
					return
				}
				this.age_show = true
			},
			ageInfo(e) {
				console.log(e)
				this.age = e.value[0].age
				this.addid = e.value[0].id
				this.lqpirce = e.value[0].price
				this.age_show = false
			},
			pirceInfo(e) {
				this.age = ''
				this.lqpirce = ''
				this.pirce = e.value[0].price
				this.introduction = e.value[0].introduction
				this.pirce_show = false
				e.value[0].skus.map(item => {
					this.agelist[0].push(item)
				})
				console.log(this.agelist)
			},
			spulist() {
				let params = {

				}
				this.$Request({
					method: 'GET',
					url: '/app-api/product/spu/page',
					data: params,
					ismsg: false,
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						res.data.list.map(item => {
							this.pircelist[0].push(item)
						})
					}
				})

			},
			modifyInfo(item) {
				console.log(item)
				if (item.value[0].accounts.length < 1) {
					uni.showToast({
						title: '請先綁定賬戶！',
						icon: 'none'
					})
					return
				}
				this.member = item.value[0].name
				this.id = item.value[0].id
				this.option_show = false
			},
			getlist() {
				let params = {

				}
				this.$Request({
					method: 'GET',
					url: '/app-api/member/address/list',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 0) {
						res.data.map(item => {
							this.list[0].push(item)
						})
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	.insurance-page {
		background-image: url('../../static/insurance/insurance-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 450rpx;
		min-height: 90vh;
		padding: 30rpx;
		position: relative;

		.nav-title {
			color: #fff;
		}

		.head {
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.head-title {
				font-size: 48rpx;
				font-weight: bold;
			}

			.head-icon {
				width: 262rpx;
				height: 262rpx;

			}
		}

		.content {
			width: 90%;
			background-color: #fff;
			border-radius: 30rpx;
			position: absolute;
			top: 22.4%;
			left: 0;
			right: 0;
			margin: 0 auto;
			padding: 0 30rpx 30rpx;
			box-shadow: 0rpx 3rpx 32rpx 1rpx rgba(0, 0, 0, 0.08);

			.title {
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
				margin-top: 30rpx;
			}

			.item {
				background-color: #F9F9F9;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-top: 30rpx;

				image {
					width: 20.09rpx;
					height: 12.54rpx;
				}
			}

			.text {
				font-size: 26rpx;
				color: #666666;
				margin-top: 20rpx;
			}
		}

		.btn {
			position: fixed;
			bottom: 8%;
			left: 0;
			right: 0;
			width: 90%;
			margin: 0 auto;
		}
	}
</style>